<template>
  <!-- 大额延迟结算回执录入明细页面弹出框-->
  <el-dialog
    title="大额即时转账业务回执录入明细"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="settingsForm" :model="formData" label-width="158px" disabled>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>大额即时转账业务回执录入信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易流水号：" prop="id">
              <el-input v-model="formData.id" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报文标识号：" prop="pkgId">
              <el-input v-model="formData.pkgId" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workdate">
              <el-date-picker
                v-model="formData.workdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="CPG日期：" prop="cpgdate">
              <el-date-picker
                v-model="formData.cpgdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型：" prop="bizTypeCode">
              <el-select v-model="formData.bizTypeCode" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.BIZ_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类：" prop="bizCtgyCode">
              <el-select v-model="formData.bizCtgyCode" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.BIZ_CTGY_HVPS_115"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="来往账方向：" prop="drct">
              <el-select v-model="formData.drct" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.DRCTCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借贷标识：" prop="cdIndicator">
              <el-select v-model="formData.cdIndicator" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CREDITDEBITCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="清算日期：" prop="clrDate">
              <el-date-picker
                v-model="formData.clrDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部机构号：" prop="brno">
              <el-select v-model="formData.brno" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap['Cnaps2Dict.CP2_BRNO']"
                  :key="dict.value"
                  :label="`${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="特许参与者：" prop="espOrg">
              <el-input v-model="formData.espOrg" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特许参与者名称：" prop="espOrgName">
              <el-input v-model="formData.espOrgName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--付款人信息-->
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerActno">
              <el-input v-model="formData.payerActno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input v-model="formData.payerName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="付款人地址" prop="payerAddr">
            <el-input v-model="formData.payerAddr" placeholder="" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款行行号" prop="payerBrno">
              <el-input v-model="formData.payerBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名：" prop="payerBrnoname">
              <el-input v-model="formData.payerBrnoname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-payer">
              <el-form-item label="付款人开户行号" prop="payerAccBrno">
                <el-input v-model="formData.payerAccBrno" placeholder="" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名" prop="payerAccBrname">
              <el-input v-model="formData.payerAccBrname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--收款人信息-->
      <el-card class="form-card payeeInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payeeActno">
              <el-input v-model="formData.payeeActno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payeeName">
              <el-input v-model="formData.payeeName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="收款人地址" prop="payeeAddr">
          <el-input v-model="formData.payeeAddr" placeholder="" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payeeBrno">
              <el-input v-model="formData.payeeBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款行行名：" prop="payeeBrnoname">
              <el-input v-model="formData.payeeBrnoname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人开户行号" prop="payeeAccBrno">
              <el-input v-model="formData.payeeAccBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人开户行行名" prop="payeeAccBrname">
              <el-input v-model="formData.payeeAccBrname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--其他信息-->
      <el-card class="form-card payOtherInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易货币：" prop="curcd">
              <el-input v-model="formData.curcd" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额：" prop="amount">
              <el-input v-model="formData.amount" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="content">
              <el-input type="textarea" v-model="formData.content" placeholder="" maxlength="210" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="中心状态：" prop="procStatus">
              <el-select v-model="formData.procStatus" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.PROCESSSTATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通讯状态：" prop="status">
              <el-select v-model="formData.status" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.PKG_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报文接收时间：" prop="rcvTime">
              <el-date-picker
                style="width: 100%"
                v-model="formData.rcvTime"
                value-format="yyyyMMddHHmmss"
                type="datetime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="三方协议号：" prop="threeId">
              <el-input v-model="formData.threeId" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        class="form-card payOtherInfo-card"
        v-if="this.formData.bizTypeCode == ('G101' || 'G102' || 'G103' || 'G110' || 'G111' || 'G114')"
      >
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="债券/央票代码：" prop="bcCode">
              <el-input v-model="formData.bcCode" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="债券/央票面额：" prop="bcAmt">
              <el-input v-model="formData.bcAmt" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="净价金额：" prop="netPriceAmt">
              <el-input v-model="formData.netPriceAmt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="债券/央票利息：" prop="bcInt">
              <el-input v-model="formData.bcInt" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回购利息：" prop="repInt">
              <el-input v-model="formData.repInt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回购到期日：" prop="repMaturity">
              <el-date-picker
                v-model="formData.repMaturity"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回购首期结算金额：" prop="repFirStAmt">
              <el-input v-model="formData.repFirStAmt" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card payOtherInfo-card" v-if="this.formData.bizTypeCode == 'G106'">
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="外汇交易币种：" prop="forexcur">
              <el-select v-model="formData.forexcur" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CURCD_5701"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="form-card payOtherInfo-card"
        v-if="this.formData.bizTypeCode == 'G109' && this.formData.bizCtgyCode == '03501'"
      >
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="质押债券总面额：" prop="bondTotalAmt">
              <el-input v-model="formData.bondTotalAmt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原报文标识号：" prop="oriPkgId">
              <el-input v-model="formData.oriPkgId" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="原发起参与机构：" prop="oriSender">
              <el-input v-model="formData.oriSender" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原发起参与机构名称：" prop="oriSendername">
              <el-input v-model="formData.oriSendername" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="中心业务状态：" prop="bizStatus">
              <el-select v-model="formData.bizStatus" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.PROCESSSTATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出质行行号：" prop="pldgBrno">
              <el-input v-model="formData.pldgBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出质行行名：" prop="pldgBrname">
              <el-input v-model="formData.pldgBrname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="form-card payOtherInfo-card"
        v-if="this.formData.bizTypeCode == 'G109' && this.formData.bizCtgyCode == '03502'"
      >
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="融资本金：" prop="financeAmt">
              <el-input v-model="formData.financeAmt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="融资利息：" prop="financeInt">
              <el-input v-model="formData.financeInt" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="还款类型：" prop="repayType">
              <el-select v-model="formData.repayType" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.REFUNDTYPECODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质押债券总面额：" prop="bondTotalAmt">
              <el-input v-model="formData.bondTotalAmt" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出质行行号：" prop="pldgBrno">
              <el-input v-model="formData.pldgBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出质行行名：" prop="pldgBrname">
              <el-input v-model="formData.pldgBrname" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="form-card payOtherInfo-card"
        v-if="
          (this.formData.bizTypeCode == 'G115' && this.formData.bizCtgyCode == '06501') ||
          (this.formData.bizTypeCode == 'G115' && this.formData.bizCtgyCode == '06502')
        "
      >
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="金融机构代码：" prop="finCode">
              <el-input v-model="formData.finCode" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金融机构名称：" prop="finName">
              <el-input v-model="formData.finName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="表外账号：" prop="offBalAcno">
              <el-input v-model="formData.offBalAcno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表外账户名称：" prop="offBalName">
              <el-input v-model="formData.offBalName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="债券面额：" prop="bondAmt">
              <el-input v-model="formData.bondAmt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="债券/央票代码：" prop="bcCode">
              <el-input v-model="formData.bcCode" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="债券/央票面额：" prop="bcAmt">
              <el-input v-model="formData.bcAmt" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="互换费率：" prop="itchgRate">
              <el-input v-model="formData.itchgRate" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="互换期限：" prop="itchgDate">
              <el-input v-model="formData.itchgDate" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期结算日：" prop="dueDate">
              <el-date-picker
                v-model="formData.dueDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="债券结算合同号：" prop="bondContract">
              <el-input v-model="formData.bondContract" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="form-card payOtherInfo-card"
        v-if="this.formData.bizTypeCode == 'G115' && this.formData.bizCtgyCode == '06503'"
      >
        <!-- <div slot="header" class="label-header-msg">
            <span>行内资金汇划信息</span>
          </div> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="金融机构代码：" prop="finCode">
              <el-input v-model="formData.finCode" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金融机构名称：" prop="finName">
              <el-input v-model="formData.finName" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="债券结算合同号：" prop="bondContract">
              <el-input v-model="formData.bondContract" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card payOtherInfo-card" v-if="this.formData.bizTypeCode == 'G116'">
        <div slot="header" class="label-header-msg">
          <span>电子信用证相关信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开证行行号：" prop="issueBrno">
              <el-input v-model="formData.issueBrno" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信用证编号：" prop="lcNo">
              <el-input v-model="formData.lcNo" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="到单编号：" prop="accptNo">
              <el-input v-model="formData.accptNo" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交单行行号：" prop="presentBrno">
              <el-input v-model="formData.presentBrno" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="寄单索款编号：" prop="sigleBillNo">
              <el-input v-model="formData.sigleBillNo" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-form ref="restForm" :model="formData" :rules="rules" label-width="158px">
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>回执信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务回执状态：" prop="returnStatus">
              <el-select v-model="formData.returnStatus" placeholder="" style="width: 100%" @change="switchStatus">
                <el-option
                  v-for="dict in dictMap.BIZRT_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务回执码：" prop="returnCode">
              <el-input v-model="formData.returnCode" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务回执信息：" prop="returnInfo">
              <el-input
                type="textarea"
                v-model="formData.returnInfo"
                :disabled="isDisabled"
                placeholder=""
                maxlength="256"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { save } from "@/api/cnaps/baseBiz/send/hvps/hvps142.js";
export default {
  name: "EditInfo",
  components: {},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      isLoading: false,
      isDisabled: true,
      rules: {
        returnStatus: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {},
    closeFn() {
      this.open = false;
      this.reset();
    },
    show() {
      this.open = true;
    },
    switchStatus(val) {
      console.log(val, "业务状态");
      if (val == "PR02") {
        this.isDisabled = true;
        this.$set(this.formData, "returnCode", "");
      } else if (val == "PR09") {
        this.isDisabled = false;
        this.$set(this.formData, "returnCode", "REJECT");
      }
    },
    submitForm() {
      this.$refs["restForm"].validate((valid) => {
        if (valid) {
          this.isLoading = true;
          save(this.formData)
            .then((res) => {
              this.msgSuccess("提交成功！");
              this.isLoading = false;
              this.open = false;
              this.$emit("editComplete", true);
            })
            .catch((err) => {
              this.isLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
